<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/router.js"></script>
</head>

<body>

    <div class="container">
        <div class="item" onclick="window.$router.setParam('username=codewld')">加载参数</div>

        <div class="item" onclick="window.$router.setParam('username=hello')">加载参数2</div>
    </div>
    
    <div class="container">
        <div class="item" onclick="window.$router.to('/home')">home</div>

        <div class="item" onclick="window.$router.to('/info')">info</div>

        <div class="item" onclick="window.$router.changeHash('/user?username=codewld')">user</div>
    </div>
    

    <div id="router-view-1"></div>

</body>

<script>
    let routerMap = {
        "": {
            "redirect": "home"
        },
        "home": {
            "path": "./home/index.html",
            "son": {}
        },
        "info": {
            "path": "./info/index.html",
            "son": {}
        },
        "user": {
            "path": "./user/index.html",
            "son": {
                "center": {
                    "path": "./user/center/index.html",
                    "son": {}
                },
                "friends": {
                    "path": "./user/friends/index.html",
                    "son": {}
                },
                "friendsRedirect": {
                    "redirect": "friends"
                }
            }
        },
        "404": {
            "path": "./404/index.html"
        }
    }

    window.$router.initial(routerMap)
</script>

<style>
    .container {
        display: flex;
        background-color: #eee;
        margin: 10px 0;
    }

    .item {
        background-color: #999;
        margin: 10px;
    }
</style>

</html>